<template>
  <el-tabs v-model="activeName" @tab-change="change">
    <el-tab-pane :lazy="true" @click="choose(item)" v-for="item in list" :label="item.label" :name="item.name" :key="item.name">
      <component :is="item.component" />
    </el-tab-pane>

  </el-tabs>
</template>

<script setup>
  import Receive from "./Receive/index.vue";
  import Borrow from "./Borrow/index.vue";
  import Return from "./Return/index.vue";
  import Repair from "./Repair/index.vue";
  import ReportedLost from "./ReportedLost/index.vue";
  import Handover from "./Handover/index.vue";
  import ConsumeReceive from "./ConsumeReceive/index.vue";

  import {useRoute} from "vue-router";

  const route = useRoute();
  const router = useRouter();

  const list = [{
    label: '资产领用',
    name: 'Receive',
    component: Receive
  }, {
    label: '资产借用',
    name: 'Borrow',
    component: Borrow
  }, {
    label: '资产退还',
    name: 'Return',
    component: Return
  }, {
    label: '资产维修',
    name: 'Repair',
    component: Repair
  }, {
    label: '资产报失',
    name: 'ReportedLost',
    component: ReportedLost
  }, {
    label: '资产交接',
    name: 'Handover',
    component: Handover
  }, {
    label: '耗材领用',
    name: 'ConsumeReceive',
    component: ConsumeReceive
  }]

  const activeName = ref('Receive');
  if (route.query && route.query.tag) {
    activeName.value = route.query.tag;
  }

  watch(route.query, (newVal, oldVal) => {
    activeName.value = newVal.tag;
  })

  function change(tabPaneName) {
    router.replace({
      query: {
        tag: tabPaneName
      }
    })

  }

</script>

<style lang="scss" scoped>

</style>
